<template>
    <section>
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
    </section>
</template>
<script>

 
export default {
    props: [],
    data () {
        return {
           
        }
    },
    mounted(){
    
    },
    methods: {
        
    }
}
</script>
<style scoped>
.star {
    display: block;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: rgba(255,255,255,0);
    transform-origin: 100% 0;
    transform: translate3d(-130px, -130px, 0);
    animation: star-ani1 4s linear infinite;
    -webkit-animation:star-ani1 4s linear infinite;
    /*box-shadow: 0 0 2px 2px rgba(255, 255, 255, .3);*/
    z-index: 2;
    opacity: 0.8;
}
.star:after {
    content: '';
    display: block;
    border: 0px solid #fff;
    border-width: 0px 36px 1px 36px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    transform: rotate(-30deg) translate3d(1px, 1px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}
.star2 {
    opacity: 1;
    animation: star-ani2 4s linear infinite;
    -webkit-animation:star-ani2 4s linear infinite;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}
.star2:after {
    opacity: 1;
    border-width: 0px 130px 1px 130px;
}
.star3 {
    opacity: 0.6;
    animation: star-ani3 6s linear infinite;
    -webkit-animation:star-ani3 6s linear infinite;
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
}
.star3:after {
    border-width: 0px 50px 1px 50px;
    opacity: 0.6;
}
.star4 {
    opacity: 0.8;
    animation: star-ani4 5s linear infinite;
    -webkit-animation:star-ani4 5s linear infinite;
    animation-delay: 9s;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
}
.star4:after {
    border-width: 0px 80px 1px 80px;
    opacity: 0.8;
}
.star5 {
    opacity: 0.1;
    animation: star-ani5 6s linear infinite;
    -webkit-animation:star-ani5 6s linear infinite;
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
}
.star5:after {
    border-width: 0px 40px 1px 40px;
    opacity: 0.1;
}
@keyframes star-ani1 {
    0% {
        transform: scale(0.8) translate3d(600px, 0px, 0);
    }
    100% {
        transform: scale(1) translate3d(-130px, 350px, 0);
    }
}
@keyframes star-ani2 {
    0% {
        transform: scale(0.8) translate3d(850px, 0px, 0);
    }
    100% {
        transform: scale(1) translate3d(-40px, 490px, 0);
    }
}
@keyframes star-ani3 {
    0% {
        transform: scale(0.8) translate3d(1500px, 0px, 0);
    }
    100% {
        transform: scale(1) translate3d(-130px, 900px, 0);
    }
}
@keyframes star-ani4 {
    0% {
        transform: scale(0.8) translate3d(1800px, 0px, 0);
    }
    100% {
        transform: scale(1) translate3d(-130px, 1050px, 0);
    }
}
@keyframes star-ani5 {
    0% {
        transform: scale(0.8) translate3d(1200px, 0px, 0);
    }
    100% {
        transform: scale(1) translate3d(-130px, 700px, 0);
    }
}
</style>